<template>
  <div class="records">
    <Tabs v-model:active="params.state" @change="setType">
      <Tab v-for="(item, index) in tabList" :key="index" :title="item">
        <div class="listCon">
          <PullRefresh v-model="refreshing" @refresh="onRefresh">
            <List v-model:loading="isLoading" :finished="finished" :offset="20" :finished-text="listData.items?.length ? '没有更多了' : ''" @load="onLoad">
              <div class="w" v-if="listData.items && listData.items?.length">
                <Cell class="cell-w" @click="seeInfo(item.id, item.state)" v-for="(item, index) in listData.items" :key="item.id">
                  <div class="cell">
                    <div class="img">
                      <div class="cell-items">
                        <!-- 名字和标签 -->
                        <div class="reason">
                          <!--<Tag :type="item.type ? 'success' : 'primary'" size="medium">{{ item.type ? "贸易" : "军品" }}</Tag>-->
                          <span> {{ item.reason }}</span>
                        </div>
                        <!-- 时间 -->
                        <span class="date">{{ item.stateTime + "至" + item.endTime }} </span>
                        <!-- 地址 -->
                        <span class="date">{{ item.departure + " 至 " + item.destination }} </span>
                      </div>
                    </div>
                    <!-- 右侧按钮 -->
                    <Tag class="type" plain="" size="medium" :type="getColor(item.state)">{{ stateList[item.state] }}</Tag>
                    <Icon name="arrow" />
                  </div>
                </Cell>
              </div>
              <Empty v-else class="mt3" image-size="80" image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" description="暂无数据" />
            </List>
          </PullRefresh>
        </div>
      </Tab>
    </Tabs>
    <Popup closeable :style="{ height: '70%' }" position="bottom" v-model:show="showInfo">
      <CellGroup>
        <Cell class="tit" title="出差详情" />
        <Cell title="客户名称" :value="currentInfo.customerName" />
        <Cell title="出差人" :value="currentInfo?.userJson?.userName" />
        <Cell title="出差事由" :value="currentInfo.reason" />
        <Cell title="交通工具" :value="currentInfo.trafficType" />
        <Cell title="单程往返" :value="currentInfo.isOneWay" />
        <Cell title="出发城市" :value="currentInfo.departure" />
        <Cell title="目的城市" :value="currentInfo.destination" />
        <Cell title="开始时间" :value="currentInfo.stateTime" />
        <Cell title="结束时间" :value="currentInfo.endTime" />
        <Cell title="出差天数" :value="currentInfo.duration" />
        <Cell title="出差备注" :value="currentInfo.remark" />
        <Cell title="成本中心" :value="currentInfo.costCenter" />
        <Cell title="发票抬头" :value="currentInfo.invoice" />
        <Cell title="同行人" :value="currentInfo.peers" />
        <Cell title="抄送人" :value="currentInfo.cTo" />
        <Cell title="直属领导" :value="currentInfo.leader" />
      </CellGroup>
    </Popup>
  </div>
</template>

<script setup name="records">
import { ref } from "vue";
import { PullRefresh, List, Cell, CellGroup, Icon, Tag, Tab, Tabs, Empty, Popup } from "vant";
import { tripPlanList, getTripPlanById } from "@/api/index";
import { reactive } from "vue";
import router from "@/router";
const tabList = ref(["我本人的出差", "我创建的出差"]);
import { Local } from "@/utils/storage";

const active = ref(0); // 0 是我创建的  1是的我发起的
const refreshing = ref(false);
const isLoading = ref(false);
const finished = ref(false);

//0 草稿  1提交  2待审核 3审核已通过  4审核不通过  5撤回
const stateList = ["草稿", "提交", "待审核", "审核已通过", "审核不通过", "撤回"];

const defaultPageSize = ref(10);
const params = ref({ pageIndex: 0, pageSize: defaultPageSize, userId: Local.get("userId"), state: 0 });
//|| "16774612299105815"
const listData = ref({
  items: [],
});

const props = defineProps({
  id: {
    type: Number,
    default: null,
  },
});

if (props.id) {
  params.value.pageIndex = 0;
}

const fetchListData = async () => {
  refreshing.value = false;
  isLoading.value = false;
  //return
  let res = await tripPlanList(params.value);
  if (res.code == 200 && res.data) {
    if (refreshing.value) {
      refreshing.value = false;
    }
    isLoading.value = false;
    listData.value.items = listData.value.items.concat(res.data.items);
  } else {
    finished.value = true;
    return;
  }
};

// 我发出的 我收到的
const setType = async () => {
  listData.value.items = [];
  params.value.pageIndex = 0;
  finished.value = false;
};

const getColor = (e) => {
  let c = "";
  switch (e) {
    case 0:
      c = "warning";
      break;
    case 4:
      c = "danger";
      break;
    case 1:
      c = "primary";
      break;
    case 2:
      c = "warning";
      break;
    case 3:
      c = "success";
      break;
    default:
      c = "warning";
      break;
  }
  return c;
};

// 查看详情
const showInfo = ref(false);
const seeInfo = (id, state) => {
  if (state == 0) {
    // 跳转到编辑
    router.push({
      path: "/apply",
      query: {
        id: id,
      },
    });
    return;
  }
  getInfoById(id);
  showInfo.value = true;
};

// 获取详情数据
const currentInfo = reactive({});
const getInfoById = async (id) => {
  let res = await getTripPlanById({ id });
  res.data.cTo = res.data.sendToJson
    .map((v) => {
      return v.userName;
    })
    .toString();
  res.data.leader = res.data.leaderJson.userName;
  Object.assign(currentInfo, res.data);
  console.log("currentInfo", currentInfo);
};

const onLoad = async () => {
  console.log("onload");
  isLoading.value = true; // 重点
  params.value.pageIndex++;
  await fetchListData();
};

const onRefresh = () => {
  // 重新加载数据
  finished.value = false;
  // 将 loading 设置为 true，表示处于加载状态
  isLoading.value = true; // 重点

  params.value.pageIndex = 1;
  fetchListData();
};
</script>
<style>
@import "../../../assets/styles/index.scss";
</style>
<style scoped lang="scss">
@import "../index.scss";
</style>
